<template>
  <div class="Voltagebox">
    <div class="tit">
      <div class="litt" style="background-color: #ffd45d;">
        <div>A相</div>
        <div class="num"><span>最大电压</span><span>{{  entityval.maxUa }}</span></div>
        <div class="num"><span>最小电压</span><span>{{ entityval.minUa }}</span></div>
      </div>
      <div class="litt" style="background-color: #6ec3b9;">
        <div>B相</div>
        <div class="num"><span>最大电压</span><span>{{ entityval.maxUb }}</span></div>
        <div class="num"><span>最小电压</span><span>{{ entityval.minUb }}</span></div>
      </div>
      <div class="litt" style="background-color: #fd7f86;">
        <div>C相</div>
        <div class="num"><span>最大电压</span><span>{{ entityval.maxUc }}</span></div>
        <div class="num"><span>最小电压</span><span>{{ entityval.minUc }}</span></div>
      </div>
    </div>
    <div class="data">
      <el-radio-group v-model="radio3" size="small" @change="getechart">
        <el-radio-button v-for="(item,index) in radiolist" :key="index" :label="item.name"></el-radio-button>
      </el-radio-group>
      <div class="echarts" ref="echartrefs"></div>
      <div class="table">
        <TableColumn  :tableConfig="tableConfig"
           :tableData="tableData" ref="tablecolumn">
          </TableColumn>
      </div>
      <div class="fenye">
        <el-pagination
            background
            layout="prev, pager, next"
            :current-page.sync="pageNo"
            @current-change="getdatalist"
            :total="total"
            :page-size="10"
          >
          </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import {gethistoylistapi,gethistoyechartapi} from '@/api/system/HistoryList'
import TableColumn from '@/components/Table'
import {GetEcharts} from '@/utils/echarts'
export default {
  name: 'CallPoliceElectric',
  components:{TableColumn},
  data() {
    return {
      row:'',
      val: '',
      entityval:{},
      radio3: 'A相电压',
      radiolist: [
        {name:'A相电压',color:'#fd7f86'},
        {name:'B相电压',color:'#ffd45d'},
        {name:'C相电压',color:'#5cbdff'},
      ],
      tableData:[],
      tableConfig: [
      { label: '设备', prop: 'deviceName' },
      { label: '时间', prop: 'date' ,center:'center'},
      { label: 'A相最大电压(V)', prop: 'maxUa' ,center:'right'},
      { label: 'A相最小电压(V)', prop: 'minUa' ,center:'right'},
      { label: 'B相最大电压(V)', prop: 'maxUb' ,center:'right'},
      { label: 'B相最小电压(V)', prop: 'minUb' ,center:'right'},
      { label: 'C相最大电压(V)', prop: 'maxUc' ,center:'right'},
      { label: 'C相最小电压(V)', prop: 'minUc' ,center:'right'},
      ],
      pageNo: 0,
      total:0
    };
  },

  mounted() {
    console.log('电压');
    // this.getechart('A相电压')
  },

  methods: {
    async getchushi(val, row) {
      this.val = val
      this.row=row
      const dateString=row.radio3=='1'?row.value1:row.radio3=='2'?row.value2:row.value3
      const { data: { list } } = await gethistoylistapi({ dateString, dateType: row.radio3, deviceId: val.id, tag: '3' })
      this.getdatalist()
      this.array = list
      this.getechart()
    },
    async getdatalist() {
      const dateString=this.row.radio3=='1'?this.row.value1:this.row.radio3=='2'?this.row.value2:this.row.value3
      const {data:{list,entity,totalCount}}=await gethistoyechartapi({ dateString, dateType: this.row.radio3, deviceId: this.val.id, tag: '3' ,pageNo:this.pageNo-1,pageSize:10})
      this.tableData = list ? list : []
      this.total=totalCount
      this.entityval=entity?entity:{}
    },
    getechart() {
      const list = this.array.filter(ele => ele.name.substring(0, 1) == this.radio3.substring(0, 1))
      const timePoints = list.find((ele) => ele.datalist.length)?.datalist.map((item) => item.timeReading)
      const array = list.map((ele) => {
        return {
            name: ele.name,
            type: 'line',
            smooth: true,
            symbol: 'none',
            data: ele.datalist.map((item) => item.valueReading),
        }
      })
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top:'20%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        color:['#fd7f86','#ffd45d'],
        legend: {right:'3%'},
        xAxis: {
          type: 'category',
          data: timePoints
        },
        yAxis: {
          type: 'value'
        },
        series: array
      };
      GetEcharts(this,this.$refs.echartrefs,option)
    }
  },
};
</script>
<style lang="scss" scoped>
.Voltagebox{
  height: 100%;
  // padding: 10px;
  .tit{
    display: flex;
    justify-content: space-between;
    .litt{
      width: calc(33.3% - 20px);
      margin: 10px;
      height: 100px;
      border-radius: 10px;
      color: #fff;
      padding: 0 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .num{
        display: flex;
        justify-content: space-between;
        margin-top: 5px;
      }
    }
  }
  .data{
    padding: 10px;
    height: calc(100% - 130px);
    .echarts{
      height: 260px;
      margin-bottom: 20px;
    }
    .table{
      height: calc(100% - 320px);
    }
    .fenye{
      text-align: right;
    }
  }
}
</style>